<template>
	<view class="container">
		<uv-popup :show="show" overlayOpacity="0" mode="top" customStyle="background-color: rgb(85 0 0 / 0%);">
			<view class="" style="width: 750rpx; height: 1000rpx; z-index: 100">
				<image style="width: 100%; height: 800rpx; z-index: 100" src="../../../static/9999.png" mode="widthFix">
				</image>
				<view class="" style="display: flex; justify-content: center; align-items: center">
					<view class="" style="
							display: flex;
							justify-content: center;
							align-items: center;
							background-color: #f84d27;
							width: 250rpx;
							height: 60rpx;
							border-radius: 30rpx;
							color: #fff;
						" @click="show = false">
						我知道了
					</view>
				</view>
			</view>
		</uv-popup>

		<uv-popup ref="showpopup" mode="bottom" closeable @close="close" :safeAreaInsetBottom="true">
			<view class="" style="width: 750rpx; height: 1000rpx; z-index: 100">
				<view class="" style="
						text-align: center;
						padding: 30rpx;
						font-weight: 700;
						border-bottom: 1rpx solid #f5f5f5;
						font-size: 32rpx;
					">
					答题卡
				</view>
				<view class="" v-if="typeId == 0">
					<view class="" style="padding: 20rpx; border-bottom: 1rpx solid #f5f5f5">
						<view class="h-flex-item-grow h-flex-x h-flex-center">
							<view><uni-icons type="checkbox-filled" size="18" color="#0089ff"></uni-icons></view>
							<view class="success-num" style="padding-left: 10rpx; margin-right: 30rpx">
								{{ countResult.success }}
							</view>
							<view><uni-icons type="clear" size="18" color="#f84d27"></uni-icons></view>
							<view class="error-num" style="padding-left: 10rpx">{{ countResult.error }}</view>
						</view>
					</view>
					<scroll-view class="topic-list" style="height: 700rpx" scroll-y="">
						<view class="list-box h-flex-x h-flex-wrap h-flex-6">
							<view class="list-item" v-for="(item, index) in dataList" :key="index"
								:style="[item.questionType == 3 ? styleObj : '']">
								<view v-if="item.questionType != 3" @tap="pickerTopic(index)"
									class="h-flex-x h-flex-center" :class="{
										active: index == topicIndex,
										success: item.answerResult && item.answer == item.answerResult,
										error: item.answerResult && item.answer != item.answerResult
									}">
									<view class="">{{ index + 1 }}</view>
								</view>
								<view class="h-flex-x h-flex-center" style="" v-if="item.questionType == 3"
									v-for="(itemmmm, indexxxx) in item.questionStemExtJson.testQuestionList" :class="{
										active: index == topicIndex && indexxxx == topicTwoIndex,
										success: itemmmm.answerResult && itemmmm.answer == itemmmm.answerResult,
										error: itemmmm.answerResult && itemmmm.answer != itemmmm.answerResult
									}" @tap="pickerTwoTopic(index, indexxxx)">
									<view class="">{{ index + 1 }}.{{ indexxxx + 1 }}</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="" v-if="typeId == 1">
					<view class="" style="padding: 20rpx; border-bottom: 1rpx solid #f5f5f5">
						<view class="h-flex-item-grow h-flex-x h-flex-center">
							<view style="width: 40rpx; height: 40rpx; background-color: #0089ff; border-radius: 50%">
							</view>
							<view class="success-num" style="padding-left: 10rpx; margin-right: 30rpx">已作答</view>
							<view style="width: 40rpx; height: 40rpx; background-color: #f84d27; border-radius: 50%">
							</view>
							<view class="error-num" style="padding-left: 10rpx">未作答</view>
						</view>
					</view>
					<scroll-view class="topic-list" style="height: 700rpx" scroll-y="">
						<view class="list-box h-flex-x h-flex-wrap h-flex-6">
							<view class="list-item" v-for="(item, index) in dataList" :key="index"
								@tap="pickerTopic(index)">
								<view class="h-flex-x h-flex-center" :class="{
										active: index == topicIndex,
										success1: item.answerResult,
										error1: !item.answerResult
									}">
									{{ index + 1 }}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="" style="
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #0089ff;
						height: 120rpx;
						color: #fff;
						font-size: 36rpx;
					" v-if="typeId == 1">
					交卷
				</view>
			</view>
		</uv-popup>

		<view class="swiper-box">
			<view class="action-bar h-flex-x">
				<view class="h-flex-x" @tap="close()">
					<!-- <uni-icons type="bars" size="18" color="#666"></uni-icons> -->
					<text style="padding-left: 10rpx; font-weight: bold">{{ topicIndex + 1 }}</text>
					<text style="color: #999; padding: 0 5rpx">/</text>
					<text style="color: #999">{{ dataList.length }}</text>
				</view>
				<view class="h-flex-x" style="display: flex; align-items: center">
					<view @tap="addFavorite">
						<view class="h-flex-x" v-if="!isFavorite"><uv-icon name="star" size="19"></uv-icon></view>
						<view class="h-flex-x" v-else>
							<uv-icon name="star-fill" color="#f2c304" size="19"></uv-icon>
						</view>
					</view>
					<view class="" style="padding: 0 20rpx" @tap="open()">
						<uv-icon name="order" size="19"></uv-icon>
					</view>
					<view class="" @click="jiaojuan()">交卷</view>
				</view>
			</view>

			<swiper class="swiper" :duration="duration" :current="swiperIndex" :disable-programmatic-animation="true"
				@change="onChange" @animationfinish="onAnimationfinish">
				<swiper-item v-for="(item, index) in swiperList" :key="index">
					<scroll-view scroll-y="true" class="swiper-scroll">
						<view class="swiper-item" @touchstart="clearAutoNextTopicTime">
							<view class="" style="background-color: ; position: fixed; top: 0%; left: 0; right: 0"
								v-if="item.questionType == 3">
								<uv-slider v-model="value" min="30"></uv-slider>
							</view>
							<view class="topic-content" style="padding-top: 50rpx">
								<text style="padding-right: 20rpx">
									<text class="type-label">{{ item.questionType | topicType }}</text>
								</text>
								<view :style="{ paddingBottom: item.questionType == 3 ? '700rpx' : '0rpx' }">
									<!-- 	<uv-parse :content="item.questionStemExtJson.testQuestionsContent"></uv-parse>
									<u-parse :nodes="item.questionStemExtJson.testQuestionsContent"></u-parse> -->
									<u-parse :tagStyle="style"
										:content="item.questionStemExtJson.testQuestionsContent"></u-parse>
								</view>
								<view class="answer-sheet" v-if="item.questionType != 3">
									<view class="item h-flex-x"
										v-for="(sheetItem, sheetIndex) in item.questionStemExtJson.testQuestionOptions"
										:key="sheetIndex" @tap="onAnswerSheet(item, sheetIndex)">
										<view v-if="item.questionType == 0"
											style="display: flex; justify-content: center; align-items: center"
											class="icon h-flex-x h-flex-center" :style="{
												border:
													sheetItem.answerResult == sheetItem.optionsName
														? '1rpx solid #0089ff'
														: '1rpx solid #f5f5f5'
											}">
											<view style="width: 20rpx; height: 20rpx; border-radius: 10rpx" :style="{
													background:
														sheetItem.answerResult == sheetItem.optionsName
															? '#0089ff'
															: '#f5f5f5'
												}"></view>
										</view>
										<view v-if="item.questionType == 0" :style="{
												color:
													sheetItem.answerResult == sheetItem.optionsName ? '#0089ff' : '#333'
											}">
											{{ sheetItem.optionsName }}
										</view>

										<view v-if="item.questionType !== 0" class="icon h-flex-x h-flex-center"
											:class="{ success: sheetItem.answerResult == sheetItem.optionsName }">
											<text>{{ sheetItem.optionsName }}</text>
										</view>
										<view v-if="item.questionType !== 0" :style="{
												color:
													sheetItem.answerResult == sheetItem.optionsName ? '#0089ff' : '#333'
											}">
											{{ sheetItem.centent }}
										</view>
									</view>
								</view>
								<view class="answer-result" v-if="item.answerResult && typeId == 0">
									<text>答案</text>
									<text style="color: #0089ff; font-weight: bold; padding: 0 20rpx">
										{{ item.answer }}
									</text>
									<text style="padding-right: 20rpx">您选择</text>
									<text style="color: #0089ff; font-weight: bold"
										v-if="item.answerResult == item.answer">
										{{ item.answerResult }}
									</text>
									<text style="color: #f84d27; font-weight: bold" v-else>
										{{ item.answerResult }}
									</text>
								</view>
								<view class="answer-doubt" v-if="item.answerResult && typeId == 0">
									<text style="font-weight: bold">题目解析：</text>
									<u-parse :content="item.questionAnalysisExtJson"></u-parse>
								</view>
								<view class="" v-if="!item.answerResult && item.questionType == 2 && typeId == 0"
									style="display: flex; align-items: center; justify-content: center; width: 700rpx">
									<uv-button type="primary" text="提交答案" @click="submitResult(item)"></uv-button>
								</view>
								<view class="" v-if="item.questionType == 2 && typeId == 1"
									style="display: flex; align-items: center; justify-content: center; width: 700rpx">
									<uv-button type="primary" text="提交答案" @click="submitResult(item)"></uv-button>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>

			<swiper class="swiper" v-if="swiperTwoList.length > 0" :duration="duration" :current="swiperTwoIndex"
				:disable-programmatic-animation="true" @change="onTwoChange" @animationfinish="onTwoAnimationfinish"
				style="position: fixed; top: 50%; left: 0; right: 0" :style="{ top: value + '%' }">
				<swiper-item v-for="(item, index) in swiperTwoList" :key="index">
					<view class="action-bar h-flex-x" style="background-color: #fff; border-top: 1rpx solid #e8e8e8">
						<view class="h-flex-x" style="display: flex; align-items: center">
							本大题共{{ swiperTwoList.length }}小题
						</view>
						<view class="h-flex-x" @tap="close()">
							<!-- <uni-icons type="bars" size="18" color="#666"></uni-icons> -->
							<text style="padding-left: 10rpx; font-weight: bold">{{ topicTwoIndex + 1 }}</text>
							<text style="color: #999; padding: 0 5rpx">/</text>
							<text style="color: #999">{{ swiperTwoList.length }}</text>
						</view>
					</view>
					<scroll-view scroll-y="true" class="swiper-scroll">
						<view class="swiper-item" @touchstart="clearAutoNextTopicTime">
							<view class="topic-content" style="padding-bottom: 70vh; background-color: #fff">
								<text style="padding-right: 20rpx">
									<text class="type-label">{{ item.questionType | topicType }}</text>
								</text>
								<view style=""><u-parse :content="item.testQuestionsContent"></u-parse></view>
								<view class="answer-sheet">
									<view class="item h-flex-x"
										v-for="(sheetItem, sheetIndex) in item.testQuestionOptions" :key="sheetIndex"
										@tap="onAnswerTwoSheet(item, sheetIndex)">
										<view v-if="item.questionType == 0"
											style="display: flex; justify-content: center; align-items: center"
											class="icon h-flex-x h-flex-center" :style="{
												border:
													sheetItem.answerResult == sheetItem.optionsName
														? '1rpx solid #0089ff'
														: '1rpx solid #f5f5f5'
											}">
											<view style="width: 20rpx; height: 20rpx; border-radius: 10rpx" :style="{
													background:
														sheetItem.answerResult == sheetItem.optionsName
															? '#0089ff'
															: '#f5f5f5'
												}"></view>
										</view>
										<view v-if="item.questionType == 0" :style="{
												color:
													sheetItem.answerResult == sheetItem.optionsName ? '#0089ff' : '#333'
											}">
											{{ sheetItem.optionsName }}
										</view>

										<view v-if="item.questionType !== 0" class="icon h-flex-x h-flex-center"
											:class="{ success: sheetItem.answerResult == sheetItem.optionsName }">
											<text>{{ sheetItem.optionsName }}</text>
										</view>
										<view v-if="item.questionType !== 0" :style="{
												color:
													sheetItem.answerResult == sheetItem.optionsName ? '#0089ff' : '#333'
											}">
											{{ sheetItem.centent }}
										</view>
									</view>
								</view>
								<view class="answer-result" v-if="item.answerResult && typeId == 0">
									<text>答案</text>
									<text style="color: #0089ff; font-weight: bold; padding: 0 20rpx">
										{{ item.answer }}
									</text>
									<text style="padding-right: 20rpx">您选择</text>
									<text style="color: #0089ff; font-weight: bold"
										v-if="item.answerResult == item.answer">
										{{ item.answerResult }}
									</text>
									<text style="color: #f84d27; font-weight: bold" v-else>
										{{ item.answerResult }}
									</text>
								</view>
								<view class="answer-doubt" v-if="item.answerResult && typeId == 0">
									<text style="font-weight: bold">题目解析：</text>
									<u-parse :content="item.analysis"></u-parse>
								</view>
								<view class="" v-if="!item.answerResult && item.questionType == 2 && typeId == 0"
									style="display: flex; align-items: center; justify-content: center; width: 700rpx">
									<uv-button type="primary" text="提交答案" @click="submitTwoResult(item)"></uv-button>
								</view>
								<view class="" v-if="item.questionType == 2 && typeId == 1"
									style="display: flex; align-items: center; justify-content: center; width: 700rpx">
									<uv-button type="primary" text="提交答案" @click="submitTwoResult(item)"></uv-button>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons';
	import dataApi from './optimized-swiper-data.js';

	import {
		getUserCollectTestQuestionsList,
		updatePlugsPracticeStudentTestRecord,
		getPracticeTestQuestionsByquestionBankList,
		insertPlugsPracticeStudentTestRecordDetails,
		insertPlugsCollect,
		cancelCollectByDataId,
		getPracticeStudentTestRecordDetailsByPracticeId,
		updatePlugsPracticeStudentTestRecordDetails,
		insertPlugsPracticeStudentTestRecordDetailsList,
		insertPlugsPracticeStudentTestRecord
	} from '../../../utils/api.js';
	export default {
		components: {
			uniIcons
		},
		data() {
			return {
				dataList: [], // 数据源
				swiperList: [], // 轮播图数据列表
				swiperIndex: 0, // 轮播图当前位置
				swiperTwoIndex: 0, // 理解题轮播图当前位置
				isChange: false, // 是否切换
				isTwoChange: false, // 是否切换
				topicIndex: 0, // 题目位置
				topicTwoIndex: 0, //理解题题目位置
				duration: 200, // 动画过渡时长
				showPopup: false,
				info: {},
				show: false,
				typeId: 0,
				practiceId: 0,
				collectList: [],
				swiperTwoList: [], //理解子试题
				value: 50,
				overShow:0,
				styleObj: {
					display: 'flex',
					width: 'auto',
					flexWrap: 'wrap'
				},
				style: {
					// 字符串的形式
					img: 'width:640rpx'
				},
				accuracy: 0
			};
		},
		computed: {
			// 结果统计
			countResult() {
				let [success, error] = [0, 0];
				this.dataList.forEach((item) => {
					if (item.questionType != 3) {
						if (item.answerResult) {
							if (item.answerResult == item.answer) {
								success++;
							} else {
								error++;
							}
						}
					} else {
						item.questionStemExtJson.testQuestionList.forEach((itemm) => {
							if (itemm.answerResult) {
								if (itemm.answerResult == itemm.answer) {
									success++;
								} else {
									error++;
								}
							}
						});
					}
				});
				return {
					success,
					error
				};
			},
			// 是否收藏
			isFavorite() {
				let item = this.dataList[this.topicIndex];
				if (item && item.favorite) {
					return true;
				}
				return false;
			}
		},
		filters: {
			topicType(type) {
				if (type == 0) {
					return '判断题';
				}
				if (type == 1) {
					return '单选题';
				}
				if (type == 2) {
					return '多选题';
				}
				if (type == 3) {
					return '理解题';
				}

				return '';
			}
		},
		onShow() {
			this.getcollectList();
		},
		onLoad(option) {
			this.info = JSON.parse(decodeURIComponent(option.info));
			this.typeId = option.typeId;
			if (option.practiceId) {
				this.practiceId = option.practiceId;
			}
			uni.setNavigationBarTitle({
				title: this.info.questionBankName
			});
			this.getDataList();
		},
		onUnload() {
			if(this.overShow==0){
				let that = this;
				console.log('我退出了');
				let data = {
					questionBankId: that.info.id,
					startTestTime: '',
					studentId: uni.getStorageSync('studentInfo').id,
					studentName: uni.getStorageSync('studentInfo').studentName,
					testNo: that.info.questionBankName,
					testStatus: 0,
					practiceType: 0,
					adminId: uni.getStorageSync('userInfo').adminId || 47,
					userServiceToken: uni.getStorageSync('userInfo').userServiceToken || 'TUW8JF4WE6D52SDL5UMN5',
					endTestTime: that.dateFormat(new Date().getTime()),
					accuracy: that.accuracy
				};
				
				insertPlugsPracticeStudentTestRecord(data).then((ress) => {
					if (ress.code == 200) {
						// uni.reLaunch({
						// 	url: `/pages/user/lianxiList/lianxiReslut?dataId=${ress.body.id}`
						// });
				
						let arrList = [];
						that.dataList.forEach((item) => {
							if (item.questionType != 3) {
								if (item.answerResult) {
									let postData = {
										adminId: uni.getStorageSync('userInfo').adminId || 47,
										userServiceToken: uni.getStorageSync('userInfo')
											.userServiceToken || 'TUW8JF4WE6D52SDL5UMN5',
										answerStatus: item.answerResult == item.answer ? 0 : 1,
										practiceId: ress.body.id,
										testQuestionsId: item.id,
										userAnswer: item.answerResult,
										userId: uni.getStorageSync('userInfo').id
									};
									arrList.push(postData);
								}
							} else {
								item.questionStemExtJson.testQuestionList.forEach((element, indexs) => {
									if (element.answerResult) {
										let postData = {
											adminId: uni.getStorageSync('userInfo').adminId || 47,
											userServiceToken: uni.getStorageSync('userInfo')
												.userServiceToken || 'TUW8JF4WE6D52SDL5UMN5',
											answerStatus: element.answerResult == element.answer ?
												0 : 1,
											practiceId: ress.body.id,
											testQuestionsId: item.id,
											userAnswer: '理解题_' + indexs + '_' + element
												.answerResult,
											userId: uni.getStorageSync('userInfo').id
										};
										arrList.push(postData);
									}
								});
							}
						});
						insertPlugsPracticeStudentTestRecordDetailsList(arrList);
					}
				});
			}
			
		},
		methods: {
			open() {
				this.$refs.showpopup.open();
			},
			close() {
				this.$refs.showpopup.close();
			},
			onInput(e) {},
			getDataList() {
				let data = {
					// questionBankId: 43,
					questionBankId: this.info.id,
					userServiceToken: 'TUW8JF4WE6D52SDL5UMN5'
				};
				getPracticeTestQuestionsByquestionBankList(data).then((res) => {
					if (res.code == 200) {
						this.dataList = res.body;
						this.dataList.forEach((item) => {
							item.questionStemExtJson = JSON.parse(item.questionStemExtJson);
							item.answer = [];
							item.list = [];
							if (item.questionType != 3) {
								item.questionStemExtJson.testQuestionOptions.forEach((result) => {
									if (result.answerStatus == 1) {
										item.answer.push(result.optionsName);
									}
								});
							}
						});
						this.dataList.forEach((item) => {
							this.collectList.forEach((sul) => {
								if (item.id == sul.dataId) {
									item.favorite = true;
								}
							});
						});
						this.renderSwiper(0);
					}
				});
			},
			getcollectList() {
				let self = this;
				let postdata = {
					page: 1,
					size: 50,
					businessId: 0,
					userServiceToken: uni.getStorageSync('userInfo').userServiceToken || 'TUW8JF4WE6D52SDL5UMN5'
				};
				getUserCollectTestQuestionsList(postdata).then((res) => {
					if (res.code == 200) {
						this.collectList = res.body.list;
						this.getDataList();
					}
				});
			},
			dateFormat(time) {
				//将时间戳格式转换成年月日时分秒
				let date = new Date(time);
				let Y = date.getFullYear() + '-';
				let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';

				let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				let strDate = Y + M + D + h + m + s;
				return strDate;
			},
			jiaojuan() {
				this.overShow=1
				let that = this;
				uni.showModal({
					content: '您是否交卷？',
					cancelText: '继续做题',
					confirmText: '交卷',
					success(res) {
						if (res.confirm) {
							let data = {
								questionBankId: that.info.id,
								startTestTime: '',
								studentId: uni.getStorageSync('studentInfo').id,
								studentName: uni.getStorageSync('studentInfo').studentName,
								testNo: that.info.questionBankName,
								testStatus: 1,
								practiceType: 0,
								adminId: uni.getStorageSync('userInfo').adminId || 47,
								userServiceToken: uni.getStorageSync('userInfo').userServiceToken ||
									'TUW8JF4WE6D52SDL5UMN5',
								endTestTime: that.dateFormat(new Date().getTime()),
								accuracy: that.accuracy
							};

							insertPlugsPracticeStudentTestRecord(data).then((ress) => {
								if (ress.code == 200) {
									uni.reLaunch({
										url: `/pages/user/lianxiList/lianxiReslut?dataId=${ress.body.id}`
									});
									let arrList = [];
									that.dataList.forEach((item) => {
										if (item.questionType != 3) {
											if (item.answerResult) {
												let postData = {
													adminId: uni.getStorageSync('userInfo')
														.adminId || 47,
													userServiceToken: uni.getStorageSync(
															'userInfo').userServiceToken ||
														'TUW8JF4WE6D52SDL5UMN5',
													answerStatus: item.answerResult == item
														.answer ? 0 : 1,
													practiceId: ress.body.id,
													testQuestionsId: item.id,
													userAnswer: item.answerResult,
													userId: uni.getStorageSync('userInfo').id
												};
												arrList.push(postData);
											}
										} else {
											item.questionStemExtJson.testQuestionList.forEach((
												element, indexs) => {
												if (element.answerResult) {
													let postData = {
														adminId: uni.getStorageSync(
																'userInfo').adminId ||
															47,
														userServiceToken: uni
															.getStorageSync('userInfo')
															.userServiceToken ||
															'TUW8JF4WE6D52SDL5UMN5',
														answerStatus: element
															.answerResult == element
															.answer ? 0 : 1,
														practiceId: ress.body.id,
														testQuestionsId: item.id,
														userAnswer: '理解题_' + indexs +
															'_' + element.answerResult,
														userId: uni.getStorageSync(
															'userInfo').id
													};
													arrList.push(postData);
												}
											});
										}
									});
									insertPlugsPracticeStudentTestRecordDetailsList(arrList);
								}
							});
						} else if (res.cancel) {}
					}
				});
			},

			// 渲染 swiper
			renderSwiper(index) {
				let list = [];
				let current = 1;
				if (this.dataList[index - 1]) {
					list.push(this.dataList[index - 1]);
				} else {
					current = 0;
				}
				list.push(this.dataList[index]);
				if (this.dataList[index + 1]) {
					list.push(this.dataList[index + 1]);
				}
				this.duration = 0;
				setTimeout(() => {
					this.swiperList = list;
					this.swiperIndex = current;
					this.topicTwoIndex = 0;
					this.swiperTwoIndex = 0;
					if (this.swiperList[this.swiperIndex].questionType == 3) {
						this.swiperTwoList = this.swiperList[this.swiperIndex].questionStemExtJson
						.testQuestionList;
						this.swiperTwoList.forEach((item) => {
							item.answer = [];
							item.list = [];
							item.testQuestionOptions.forEach((result) => {
								if (result.answerStatus == 1) {
									item.answer.push(result.optionsName);
								}
							});
						});
					} else {
						this.swiperTwoList = [];
					}

					setTimeout(() => {
						this.duration = 200;
					}, 100);
				}, 50);
			},

			renderTwoSwiper(index, indexxxx) {
				let list = [];
				let current = 1;
				if (this.dataList[index - 1]) {
					list.push(this.dataList[index - 1]);
				} else {
					current = 0;
				}
				list.push(this.dataList[index]);
				if (this.dataList[index + 1]) {
					list.push(this.dataList[index + 1]);
				}

				this.duration = 0;

				setTimeout(() => {
					this.swiperList = list;
					this.swiperIndex = current;
					this.topicTwoIndex = indexxxx;
					this.swiperTwoIndex = indexxxx;
					if (this.swiperList[this.swiperIndex].questionType == 3) {
						this.swiperTwoList = this.swiperList[this.swiperIndex].questionStemExtJson
						.testQuestionList;
						this.swiperTwoList.forEach((item) => {
							item.answer = [];
							item.list = [];
							item.testQuestionOptions.forEach((result) => {
								if (result.answerStatus == 1) {
									item.answer.push(result.optionsName);
								}
							});
						});
					} else {
						this.swiperTwoList = [];
					}

					setTimeout(() => {
						this.duration = 200;
					}, 100);
				}, 50);
			},
			// 轮播图切换
			onChange(e) {
				// 非触摸事件不做轮播图状态更新
				if (e.detail.source != 'touch') return;

				// 标识已切换
				this.isChange = true;
				// 轮播图当前位置大于原来时则表示为下一题
				if (e.detail.current > this.swiperIndex) {
					this.topicIndex++;
				} else {
					// 轮播图当前位置小于原来时则表示为上一题
					this.topicIndex--;
				}

				// 更新轮播图位置数值，为更新时让 Vue 能监听到数据有改变
				this.swiperIndex = e.detail.current;
			},
			// 轮播图动画结束
			onAnimationfinish(e) {
				if (!this.isChange) return;

				this.isChange = false;
				setTimeout(() => {
					this.renderSwiper(this.topicIndex);
				}, 10);
			},

			// 理解题轮播图切换
			onTwoChange(e) {
				// 非触摸事件不做轮播图状态更新
				if (e.detail.source != 'touch') return;

				// 标识已切换
				this.isTwoChange = true;
				// 轮播图当前位置大于原来时则表示为下一题
				if (e.detail.current > this.swiperTwoIndex) {
					this.topicTwoIndex++;
				} else {
					// 轮播图当前位置小于原来时则表示为上一题
					this.topicTwoIndex--;
				}

				// 更新轮播图位置数值，为更新时让 Vue 能监听到数据有改变
				this.swiperTwoIndex = e.detail.current;
			},
			// 理解题轮播图动画结束
			onTwoAnimationfinish(e) {
				if (!this.isTwoChange) return;

				this.isTwoChange = false;
				setTimeout(() => {
					// this.renderSwiper(this.topicIndex);
				}, 10);
			},

			// 选择题目
			pickerTopic(index) {
				this.topicIndex = index;
				this.renderSwiper(index);
				this.close();
			},
			//理解选择题目
			pickerTwoTopic(index, indexxxx) {
				this.topicIndex = index;
				this.topicTwoIndex = indexxxx;
				this.renderTwoSwiper(index, indexxxx);
				this.close();
			},

			// 监听答题
			onAnswerSheet(item, index) {
				if (this.typeId == 0) {
					if (this.swiperList[this.swiperIndex].answerResult) {
						// 不能重复答题
						return;
					}
					if (item.questionType == 0 || item.questionType == 1) {
						let seelctedValue =
							this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index].optionsName;
						this.$set(
							this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index],
							'answerResult',
							seelctedValue
						);
						this.$set(this.swiperList[this.swiperIndex], 'answerResult', seelctedValue);
					} else if (item.questionType == 2) {
						if (
							!this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index].answerResult
						) {
							let seelctedValue =
								this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index]
								.optionsName;
							this.$set(
								this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index],
								'answerResult',
								seelctedValue
							);
							this.swiperList[this.swiperIndex].list.push(seelctedValue);
						} else {
							let seelctedValue1 =
								this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index]
								.optionsName;
							this.$set(
								this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index],
								'answerResult',
								''
							);
							this.swiperList[this.swiperIndex].list.splice(
								this.swiperList[this.swiperIndex].list.findIndex((item) => item === seelctedValue1),
								1
							);
						}
					}
				} else {
					if (item.questionType == 0 || item.questionType == 1) {
						let seelctedValue =
							this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index].optionsName;
						this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions.forEach((item) => {
							item.answerResult = '';
						});
						this.$set(
							this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index],
							'answerResult',
							seelctedValue
						);
						this.$set(this.swiperList[this.swiperIndex], 'answerResult', seelctedValue);

						let pickerIndex = this.topicIndex + 1;
						if (pickerIndex < this.dataList.length) {
							this.pickerTopic(pickerIndex);
						}
						let data = {
							practiceId: this.practiceId,
							testQuestionsId: item.id
						};
					} else if (item.questionType == 2) {
						if (
							!this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index].answerResult
						) {
							let seelctedValue =
								this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index]
								.optionsName;
							this.$set(
								this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index],
								'answerResult',
								seelctedValue
							);
							this.swiperList[this.swiperIndex].list.push(seelctedValue);
						} else {
							let seelctedValue1 =
								this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index]
								.optionsName;
							this.$set(
								this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index],
								'answerResult',
								''
							);
							this.swiperList[this.swiperIndex].list.splice(
								this.swiperList[this.swiperIndex].list.findIndex((item) => item === seelctedValue1),
								1
							);
						}
					}
				}
				let list2 = [];
				let list3 = [];
				list2 = this.dataList.filter(
					(item) => item.questionType == 0 || item.questionType == 1 || item.questionType == 2
				);
				list3 = this.dataList.filter((item) => item.questionType == 3);
				let list4 = [];
				if (list3.length > 0) {
					list3.forEach((item) => {
						list4 = list4.concat(item.questionStemExtJson.testQuestionList);
					});
				}
				let list = [];
				this.dataList.forEach((item) => {
					if (item.questionType == 0 || item.questionType == 1) {
						if (item.answerResult) {
							if (item.answer.toString() == item.answerResult) {
								list.push(item);
							}
						}
					} else if (item.questionType == 2) {
						if (item.list.length > 0) {
							if (item.answer.toString() == item.list.toString()) {
								list.push(item);
							}
						}
					} else if (item.questionType == 3) {
						item.questionStemExtJson.testQuestionList.forEach((itm) => {
							if (itm.questionType == 1 || itm.questionType == 0) {
								if (itm.answerResult) {
									if (itm.answer.toString() == itm.answerResult) {
										list.push(itm);
									}
								}
							} else if (itm.questionType == 2) {
								if (itm.list) {
									if (itm.answer.toString() == itm.list.toString()) {
										list.push(itm);
									}
								}
							}
						});
					}
				});
				let num = ((list.length / (list2.length + list4.length)) * 100).toFixed(2);
				this.accuracy = num;
			},

			onAnswerTwoSheet(item, index) {
				if (this.typeId == 0) {
					if (this.swiperTwoList[this.swiperTwoIndex].answerResult) {
						// 不能重复答题
						return;
					}
					if (item.questionType == 0 || item.questionType == 1) {
						let seelctedValue = this.swiperTwoList[this.swiperTwoIndex].testQuestionOptions[index].optionsName;
						this.$set(
							this.swiperTwoList[this.swiperTwoIndex].testQuestionOptions[index],
							'answerResult',
							seelctedValue
						);
						this.$set(this.swiperTwoList[this.swiperTwoIndex], 'answerResult', seelctedValue);
					} else if (item.questionType == 2) {
						if (!this.swiperTwoList[this.swiperTwoIndex].testQuestionOptions[index].answerResult) {
							let seelctedValue =
								this.swiperTwoList[this.swiperTwoIndex].testQuestionOptions[index].optionsName;
							this.$set(
								this.swiperTwoList[this.swiperTwoIndex].testQuestionOptions[index],
								'answerResult',
								seelctedValue
							);
							this.swiperTwoList[this.swiperTwoIndex].list.push(seelctedValue);
						} else {
							let seelctedValue1 =
								this.swiperTwoList[this.swiperTwoIndex].testQuestionOptions[index].optionsName;
							this.$set(
								this.swiperTwoList[this.swiperTwoIndex].testQuestionOptions[index],
								'answerResult',
								''
							);
							this.swiperTwoList[this.swiperTwoIndex].list.splice(
								this.swiperTwoList[this.swiperTwoIndex].list.findIndex((item) => item ===
									seelctedValue1),
								1
							);
						}
					}
				} else {
					if (item.questionType == 0 || item.questionType == 1) {
						let seelctedValue =
							this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index].optionsName;
						this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions.forEach((item) => {
							item.answerResult = '';
						});
						this.$set(
							this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index],
							'answerResult',
							seelctedValue
						);
						this.$set(this.swiperList[this.swiperIndex], 'answerResult', seelctedValue);

						let pickerIndex = this.topicIndex + 1;
						if (pickerIndex < this.dataList.length) {
							this.pickerTopic(pickerIndex);
						}
					} else if (item.questionType == 2) {
						if (
							!this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index].answerResult
						) {
							let seelctedValue =
								this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index]
								.optionsName;
							this.$set(
								this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index],
								'answerResult',
								seelctedValue
							);
							this.swiperList[this.swiperIndex].list.push(seelctedValue);
						} else {
							let seelctedValue1 =
								this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index]
								.optionsName;
							this.$set(
								this.swiperList[this.swiperIndex].questionStemExtJson.testQuestionOptions[index],
								'answerResult',
								''
							);
							this.swiperList[this.swiperIndex].list.splice(
								this.swiperList[this.swiperIndex].list.findIndex((item) => item === seelctedValue1),
								1
							);
						}
					}
				}

				let list2 = [];
				let list3 = [];
				list2 = this.dataList.filter(
					(item) => item.questionType == 0 || item.questionType == 1 || item.questionType == 2
				);
				list3 = this.dataList.filter((item) => item.questionType == 3);
				let list4 = [];
				if (list3.length > 0) {
					list3.forEach((item) => {
						list4 = list4.concat(item.questionStemExtJson.testQuestionList);
					});
				}

				let list = [];
				this.dataList.forEach((item) => {
					if (item.questionType == 0 || item.questionType == 1) {
						if (item.answerResult) {
							if (item.answer.toString() == item.answerResult) {
								list.push(item);
							}
						}
					} else if (item.questionType == 2) {
						if (item.list.length > 0) {
							if (item.answer.toString() == item.list.toString()) {
								list.push(item);
							}
						}
					} else if (item.questionType == 3) {
						item.questionStemExtJson.testQuestionList.forEach((itm) => {
							if (itm.questionType == 1 || itm.questionType == 0) {
								if (itm.answerResult) {
									if (itm.answer.toString() == itm.answerResult) {
										list.push(itm);
									}
								}
							} else if (itm.questionType == 2) {
								if (itm.list) {
									if (itm.answer.toString() == itm.list.toString()) {
										list.push(itm);
									}
								}
							}
						});
					}
				});
				let num = ((list.length / (list2.length + list4.length)) * 100).toFixed(2);
				this.accuracy = num;
			},
			submitResult(item) {
				if (this.typeId == 0) {
					this.$set(this.swiperList[this.swiperIndex], 'answerResult', item.list.sort().join());
				} else {
					this.$set(this.swiperList[this.swiperIndex], 'answerResult', item.list.sort().join());
					let pickerIndex = this.topicIndex + 1;
					if (pickerIndex < this.dataList.length) {
						this.pickerTopic(pickerIndex);
					}
				}
			},
			submitTwoResult(item) {
				if (this.typeId == 0) {
					this.$set(this.swiperTwoList[this.swiperTwoIndex], 'answerResult', item.list.sort().join());
				} else {
					this.$set(this.swiperList[this.swiperIndex], 'answerResult', item.list.sort().join());
					let pickerIndex = this.topicIndex + 1;
					if (pickerIndex < this.dataList.length) {
						this.pickerTopic(pickerIndex);
					}
				}
			},
			// 清除自动跳到下一页延时器
			clearAutoNextTopicTime() {
				clearTimeout(this.autoNextTopicTime);
			},
			// 添加收藏
			addFavorite() {
				let favorite = this.dataList[this.topicIndex].favorite;
				if (favorite) {
					delete this.dataList[this.topicIndex].favorite;
					this.$set(this.dataList[this.topicIndex], 'favorite', !favorite);
					let postData = {
						dataId: this.dataList[this.topicIndex].id,
						dataType: 3
					};
					cancelCollectByDataId(postData).then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: '取消收藏',
								duration: 1000,
								icon: 'success'
							});
						} else {}
					});
				} else {
					this.$set(this.dataList[this.topicIndex], 'favorite', !favorite);
					let postData = {
						dataId: this.dataList[this.topicIndex].id,
						types: 3,
						businessId: 0
					};
					insertPlugsCollect(postData).then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: '收藏成功',
								duration: 1000,
								icon: 'success'
							});
						} else {}
					});
				}
			}
		}
	};
</script>

<style lang="scss">
	@import 'lib/helang-flex.scss';

	page {
		height: 100%;
	}

	.actives {
		color: red;
	}

	.actives1 {
		color: #fff;
	}

	// 容器
	.container {
		height: 100%;
		background-color: #fff;
		position: relative;
		color: #333;
		font-size: 28rpx;
	}

	// 轮播盒子
	.swiper-box {
		position: absolute;
		top: 0rpx;
		left: 0;
		right: 0;
		bottom: 100rpx;
		height: auto;
		width: auto;
		z-index: 1;
	}

	.action-bar {
		height: 100rpx;
		width: 100%;
		box-sizing: border-box;
		border-bottom: #ddd solid 1px;
		font-size: 28rpx;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;

		.success-num {
			color: #0089ff;
		}

		.error-num {
			color: #f84d27;
		}
	}

	.topic-list {
		height: 600rpx;

		.list-box {
			padding: 20rpx 20rpx 0 20rpx;
			font-size: 28rpx;
			color: #666;

			.list-item {
				padding-bottom: 20rpx;

				>view {
					width: 80rpx;
					height: 80rpx;
					background-color: #fff;
					border: #ddd solid 1px;
					border-radius: 50%;
					// margin: 0 auto;

					&.active {
						border: #0089ff solid 1px;
					}

					&.success {
						background-color: #dbf2ff;
						color: #0089ff;
						border: none;

						&.active {
							border: #0089ff solid 1px;
						}
					}

					&.success1 {
						background-color: #0089ff;
						color: #fff;
						border: none;
					}

					&.error {
						background-color: #ffeceb;
						color: #f84d27;
						border: none;

						&.active {
							border: #f84d27 solid 1px;
						}
					}

					&.error1 {
						background-color: red;
						color: #fff;
						border: none;
					}
				}
			}
		}
	}

	.swiper {
		height: 100%;

		.swiper-scroll {
			height: 100%;
		}

		.swiper-item {
			background-color: #fff;
			box-sizing: border-box;
			height: 100%;

			.topic-content {
				padding: 30rpx;
				font-size: 32rpx;
				color: #333;
				line-height: 1.6;

				image {
					width: 660rpx !important;
				}

				// 题目类型标签
				.type-label {
					background-color: #0089ff;
					color: #fff;
					border-radius: 6rpx;
					padding: 4rpx 10rpx;
					font-size: 24rpx;
				}

				// 答题卡
				.answer-sheet {
					margin: 40rpx -30rpx;
					padding: 20rpx;

					.item {
						padding: 20rpx 30rpx;
						background-color: #f5f5f5;
						border-radius: 20rpx;
						margin-bottom: 20rpx;

						&:active {
							background-color: #f3f3f3;
						}

						+.item {
							margin-top: 0;
						}

						.icon {
							margin-right: 20rpx;
							box-shadow: 0 0 5px #999;
							width: 40rpx;
							height: 40rpx;
							border-radius: 50%;
							font-size: 26rpx;

							&.success {
								background-color: #0089ff;
								color: #fff;
							}

							&.error {
								background-color: #f84d27;
							}
						}
					}
				}

				// 答题结果
				.answer-result {
					background-color: #f3f3f3;
					border-radius: 8rpx;
					padding: 20rpx 30rpx;
					font-size: 28rpx;
				}

				// 题目解析
				.answer-doubt {
					font-size: 28rpx;
					color: #8a6d3b;
					background-color: #fcf8e3;
					border: #faebcc solid 1px;
					margin-top: 40rpx;
					padding: 20rpx 30rpx;
					border-radius: 8rpx;
					word-break: break-all;

					image {
						width: 620rpx !important;
					}
				}
			}
		}
	}

	// 底部面板
	.panel-bottom {
		position: absolute;
		left: 0;
		// bottom: 0;
		// top: 100rpx;
		height: auto;
		width: 100%;
		z-index: 2;

		// 遮罩
		.shade {
			position: fixed;
			z-index: 9;
			background-color: rgba(33, 33, 33, 0.5);
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		// 内容
		.content {
			position: absolute;
			z-index: 10;
			bottom: 0;
			left: 0;
			width: 100%;
			height: auto;
			background-color: #fff;
		}

		// 操作栏
		.action-bar {
			height: 100rpx;
			width: 100%;
			box-sizing: border-box;
			border-bottom: #ddd solid 1px;
			font-size: 28rpx;
			padding: 0 30rpx;
			display: flex;
			justify-content: space-between;

			.success-num {
				color: #0089ff;
			}

			.error-num {
				color: #f84d27;
			}
		}

		// 题目列表
		.topic-list {
			height: 600rpx;

			.list-box {
				padding: 20rpx 20rpx 0 20rpx;
				font-size: 28rpx;
				color: #666;

				.list-item {
					padding-bottom: 20rpx;

					>view {
						width: 80rpx;
						height: 80rpx;
						background-color: #fff;
						border: #ddd solid 1px;
						border-radius: 50%;
						margin: 0 auto;

						&.active {
							border: #0089ff solid 1px;
						}

						&.success {
							background-color: #dbf2ff;
							color: #0089ff;
							border: none;

							&.active {
								border: #0089ff solid 1px;
							}
						}

						&.error {
							background-color: #ffeceb;
							color: #f84d27;
							border: none;

							&.active {
								border: #f84d27 solid 1px;
							}
						}
					}
				}
			}
		}
	}
</style>